<template>
  <div class="dashboard-editor-container">
    <el-row class="panel-group" :gutter="40">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class='card-panel'>
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="stoproad" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">禁停道路数&nbsp;&nbsp;
              <count-to style="color: red" class="card-panel-num" :startVal="0" :endVal="this.panelIncome.shouldincome" :duration="2600"></count-to>
            </div>
            <div class="card-panel-text">违停数&nbsp;&nbsp;
              <count-to style="color: red" class="card-panel-num" :startVal="0" :endVal="this.panelIncome.wtcount" :duration="2600"></count-to>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="canroad" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description" style="margin: 10px">
            <div class="card-panel-text" >准停道路数&nbsp;&nbsp;
              <count-to style="color: #2cff17" class="card-panel-num" :startVal="0" :endVal="this.panelIncome.paymentincome" :duration="2600"></count-to>
            </div>
            <div class="card-panel-text">车场数&nbsp;&nbsp;
              <count-to style="color: #2cff17" class="card-panel-num" :startVal="0" :endVal="this.panelIncome.parknum" :duration="2600"></count-to>
            </div>
            <div class="card-panel-text">泊位数&nbsp;&nbsp;
              <count-to style="color: #2cff17" class="card-panel-num" :startVal="0" :endVal="321" :duration="2600"></count-to>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" >
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="xianzhi" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">准停道路数&nbsp;&nbsp;
              <count-to style="color: #e98f36" class="card-panel-num" :startVal="0" :endVal="this.panelIncome.shouldincome" :duration="123"></count-to>
            </div>
            <div class="card-panel-text">停车容量&nbsp;&nbsp;
              <count-to style="color: #e98f36" class="card-panel-num" :startVal="0" :endVal="135" :duration="2600"></count-to>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" >
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="linshi" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">临停道路数&nbsp;&nbsp;
              <count-to style="color: #ffba5d" class="card-panel-num" :startVal="0" :endVal="this.parkingReport.todayParkIns" :duration="3600"></count-to>
            </div>
            <div class="card-panel-text">停车容量&nbsp;&nbsp;
              <count-to style="color: #ffba5d" class="card-panel-num" :startVal="0" :endVal="206" :duration="2600"></count-to>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="container">
        <baidu-map class="box" center="济南" :scrollWheelZoom="true" :zoom="14">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
          <bm-label v-for="item in coordinate" content
                    :position="{lng: item.longitude, lat: item.latitude}"
                    :labelStyle="labelStyle"
                    :offset="{'width':-16,'height':-37}"
                    @click="openInfo(item)"
                    :title="item.name"/>
          <!--<bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"-->
                          <!--@close="infoWindowClose" @open="infoWindowOpen" :width="width">-->
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>-->
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 14px">收费员工号：{{this.infoWindow.no}}</p>-->
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>-->
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 14px">定位时间：{{this.infoWindow.positionTime}}</p>-->
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 14px">联系方式：{{this.infoWindow.telNum}}</p>-->
          <!--</bm-info-window>-->
        </baidu-map>
    </el-row>
  </div>
</template>

<script>
  import CountTo from 'vue-count-to'

  export default {
    data() {
      return {
        bar_chart: null,
        line_chart: null,
        bar_id: 'bar_data',
        line_id: 'line_data',
        panelIncome: {
          shouldincome: '75',
          paymentincome: '153',
          payoutincome: '96',
          statisticaltime: '12',

          wtcount: '23',
          parknum: '265'
        },
        workinguserNum: '',
        parkingReport: {
          overNightCars: '',
          parkings: '',
          placeUsageRate: '',
          todayParkIns: '23'
        },
        /* 地图 */
        width: 280,
        show: false,
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          no: '',
          dw: '',
          telNum: '',
          positionTime: ''
        },
        labelStyle: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px',
          background: 'url(../src/assets/map_images/markersidle.png) no-repeat'
        },
        coordinate: [
          {
            longitude: '117.032724',
            latitude: '36.680484',
            name: '泰华七号管理员',
            no: '1528',
            dw: '泰华停车运营公司',
            positionTime: new Date(),
            telNum: '17862837487'
          }
        ]
      }
    },
    components: {
      CountTo
    },
    mounted() {
    },
    methods: {
      openInfo(val) {
        console.log(val)
        this.infoWindow.longirude = val.longitude
        this.infoWindow.latitude = val.latitude
        this.infoWindow.title = val.name
        this.infoWindow.no = val.no
        this.infoWindow.dw = val.dw
        this.infoWindow.telNum = val.telNum
        this.infoWindow.positionTime = val.positionTime
        this.show = true
      },
      infoWindowClose(e) {
        this.show = false
      },
      infoWindowOpen(e) {
        this.show = true
      }
    }
  }
</script>

<style lang="less" scoped>
  .dashboard-editor-container {
    padding: 15px;
    background-color: rgb(240, 242, 245);
  }
  .panel-group {
    .card-panel-col{
      margin-bottom: 15px;
    }
    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-people {
          background: #40E0D0;
        }
        .icon-message {
          background: #36a3f7;
        }
        .icon-money {
          background: #EEB422;
        }
        .icon-shoppingCard {
          background: #548B54
        }
      }
      .icon-people {
        color: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
      }
      .icon-money {
        color: #F5A327;
      }
      .icon-shoppingCard {
        color: #ACD261
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 1.8em;
          color: black;
        }
      }
    }
    .card-panel-icon{
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  }
  .container {
    position: relative;
    width: 100%;
    height: 70vh;
    border: 3px solid #FFFFFF;
  }
  .box {
    width: 100%;
    height: 100%;
  }
</style>
